<template>
  <view class="content">
    <!-- 1. Logo + 标题区域 -->
    <view class="header-group">
      <view class="logo-container">
        <image class="logo" src="/static/logo.png" mode="widthFix" />
      </view>
      <view class="text-area">
        <text class="title">{{ title }}</text>
      </view>
    </view>

    <!-- 2. 文本插值区域 -->
    <view class="interpolation-group">
      <view class="interpolation-item">{{ number + 1 }}</view>
      <view class="interpolation-item">{{ ok ? 'YES' : 'NO' }}</view>
      <view class="interpolation-item">{{ message.split('').reverse().join('') }}</view>
    </view>

    <!-- 3. v-for列表区域 -->
    <view class="list-group">
      <view v-for="item in arr" :key="item.id" class="list-item list-item-red">
        {{ JSON.stringify(item) }}
      </view>
      <view v-for="(item, index) in 6" :key="index" class="list-item list-item-green">
        <view :class="`list-style-${index % 2}`">{{ index + 2 }}</view>
      </view>
      <view v-for="(value, name, index) in object" :key="index" class="list-item">
        {{ index }}---{{ name }}---{{ value }}
      </view>
      <view v-for="item in arr" :key="item.id" class="list-item clickable-item" @click="handleItemClick(item.name)">
        {{ item.id }}:{{ item.name }}
      </view>
    </view>

    <!-- 4. 双向绑定v-model模块（已修改：添加logo-container使图片居中） -->
    <view class="module">
      <!-- 新增logo-container容器实现水平居中 -->
      <view class="logo-container">
        <image :class="className" src="/static/logo.png" mode="widthFix" />
      </view>
      <view class="modelclass">
        <input v-model="message" placeholder="请输入内容" @focus="showTip('输入框已激活')" />
        <text class="model-text">当前输入：{{ message || '暂无内容' }}</text>
      </view>
    </view>

    <!-- 5. 天气&State判断模块 -->
    <view class="module">
      <view class="logo-container">
        <image class="logo" @click="toggleWeatherAndState" src="/static/logo.png" mode="widthFix" hover-class="logo-hover" />
      </view>
      <view class="weather-tip">{{ raining ? '下雨天，只能在家呆着了' : '今天天气真好' }}</view>
      <view class="state-tip" v-if="state">state的值是：{{ state }}</view>
      <view class="state-list">
        <view v-if="state === 'vue'" class="state-item active" @click="setState('vue')">
          uni-app
        </view>
        <view v-else-if="state === 'html'" class="state-item active" @click="setState('html')">
          HTML
        </view>
        <view v-else class="state-item active" @click="setState('APP')">
          APP
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// 常量定义（统一管理）
const DEFAULT_TITLE = 'Hello UniAPP';
const INITIAL_STATE = 'vue';

export default {
  data() {
    return {
      title: DEFAULT_TITLE,
      number: 1,
      ok: true,
      message: 'Hello Vue',
      arr: [
        { id: 1, name: 'uni-app' },
        { id: 2, name: 'HTML' },
        { id: 3, name: 'WeChat' },
        { id: 4, name: 'Android' }
      ],
      object: {
        title: 'How to do lists in Vue',
        author: 'Jane Doe',
        publishedAt: '2020-04-10'
      },
      className: 'smalllogo',
      raining: false,
      state: INITIAL_STATE
    };
  },
  methods: {
    handleItemClick(itemName) {
      uni.showToast({ title: `已选择：${itemName}`, icon: 'none', duration: 1500 });
    },
    showTip(content) {
      uni.showToast({ title: content, icon: 'none', duration: 1000 });
    },
    toggleWeatherAndState() {
      this.raining = !this.raining;
      this.state = this.state === 'vue' ? 'html' : this.state === 'html' ? 'APP' : 'vue';
      this.showTip(`天气已切换 | State已切换为：${this.state}`);
    },
    setState(targetState) {
      this.state = targetState;
      this.showTip(`已切换到：${targetState}`);
    }
  },
  onLoad() {
    console.log('页面加载完成，初始化数据成功');
    this.showTip('页面已加载完成');
  }
};
</script>

<style scoped>
/* 全局容器样式 */
.content {
  padding: 20rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
  box-sizing: border-box;
}

/* 1. 头部区域样式 */
.header-group {
  text-align: center;
  margin-bottom: 20rpx;
}
.logo-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  margin-bottom: 10rpx; /* 与下方内容保持间距 */
}
.logo {
  width: 150rpx;
  height: 150rpx;
  transition: transform 0.2s;
}
.logo-hover {
  transform: scale(1.05);
}
.text-area {
  margin: 10rpx 0;
}
.title {
  font-size: 36rpx;
  color: #8f8f94;
  font-weight: 500;
}

/* 2. 文本插值区域样式 */
.interpolation-group {
  background-color: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}
.interpolation-item {
  font-size: 32rpx;
  margin: 8rpx 0;
  color: #333;
}

/* 3. v-for列表区域样式 */
.list-group {
  background-color: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}
.list-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin: 15rpx 0 10rpx;
  border-left: 4rpx solid #007aff;
  padding-left: 10rpx;
}
.list-item {
  font-size: 28rpx;
  margin: 6rpx 0;
  line-height: 1.5;
}
.list-item-red {
  color: #ff0000;
}
.list-item-green {
  color: #00ff00;
}
.clickable-item {
  cursor: pointer;
  text-decoration: underline;
  color: #007aff !important;
}
.list-style-0 {
  color: #666;
}
.list-style-1 {
  color: #999;
}

/* 4. 模块通用样式 */
.module {
  background-color: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
  margin: 20rpx 0;
}
.module-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 15rpx;
  border-bottom: 1px solid #eee;
  padding-bottom: 10rpx;
}

/* 5. v-model模块样式 */
.smalllogo {
  width: 100rpx;
  height: 100rpx;
  margin-bottom: 15rpx;
  
}
.modelclass {
  margin: 15rpx 0;
  padding: 15rpx;
  background-color: #e6f7ff;
  border-radius: 8rpx;
}
.modelclass input {
  width: 100%;
  height: 60rpx;
  border: 1px solid #b3d8ff;
  border-radius: 6rpx;
  padding: 0 15rpx;
  font-size: 28rpx;
  margin-bottom: 10rpx;
  background-color: #fff;
}
.model-text {
  font-size: 28rpx;
  color: #333;
}

/* 6. 天气&State模块样式 */
.weather-tip {
  font-size: 28rpx;
  color: #333;
  margin: 10rpx 0;
  text-align: center;
}
.state-tip {
  font-size: 28rpx;
  color: #007aff;
  margin: 10rpx 0;
  text-align: center;
}
.state-list {
  margin-top: 15rpx;
  display: flex;
  justify-content: center;
}
.state-item {
  font-size: 28rpx;
  color: #666;
  padding: 8rpx 15rpx;
  margin-right: 10rpx;
  border-radius: 6rpx;
  cursor: pointer;
}
.state-item.active {
  color: #007aff;
  background-color: #e6f7ff;
  border: 1px solid #b3d8ff;
}
</style>
